---
title: Project Settings
---

Your Triplex project can be configured through the `.triplex/config.json` file.

## Options

### Files

The `files` option is a glob array of relative paths used to tell Triplex what
files it can open. You can define multiple roots. These found files will be
displayed in the `File` > `Open` menu.

**Example**

```json
{
  "files": ["../src/**/*.tsx"]
}
```

### Components

The `components` option is a glob array of relative paths used to tell Triplex
what files should be available to add. You can define multiple roots.

Defaults to `[]`.

**Example**

```json
{
  "components": ["../src/components/**/*.tsx"]
}
```

### Public directory

The public directory can be used to expose files through the local dev server,
such as images, videos, and GLTF files. For example if the public directory
includes a `public/image.png` image it will be made available at
`http://localhost:3333/image.png`.

Defaults to `"../public"`.

**Example**

```json
{
  "publicDir": ["../public"]
}
```

### Assets directory

Folder inside the public directory folder where Triplex maintains static assets
such as GLTF and GLB files, made available to be added to the open component as
a `GLTF` element.

Defaults to `"assets"`.

**Example**

```json
{
  "assetsDir": "mesh"
}
```

### Provider

Use the `provider` property to declare a global component that is rendered in
for every scene. It can render
[Context providers](https://react.dev/reference/react/createContext#provider)
such as an XR component, a router, and even custom ones. Props your provider
takes can be set through the editor,
[learn more](/docs/guides/provider-controls).

The provider component **must** be the default export and render the children
prop.

```json
{
  "provider": "./provider.tsx"
}
```

```js
// ./provider.tsx
import { XR } from "@react-three/xr";

function Provider({ children }) {
  return <XR>{children}</XR>;
}

export default Provider;
```

### Define

The `define` option is used to replace hardcoded variables in your source code
with values from the config file. Works exactly the same as the `define` option
in [Vite](https://vitejs.dev/config/shared-options.html#define).

```json
{
  "define": {
    "__DEV__": true
  }
}
```

### Renderer attributes

The `rendererAttributes` option is used to configure the renderer. Currently
only the `gl` property is supported that
[sets top level attributes](https://threejs.org/docs/#api/en/renderers/WebGLRenderer)
of the `WebGLRenderer`.

```json
{
  "rendererAttributes": {
    "gl": {
      "antialias": true
    }
  }
}
```
